<template>
<header>
  <div class="nav_i" @click="my_side()">
    <span>
               <i class="iconfont icon-list"></i>
			</span>
  </div>
  <div class="nav_title">
    <p>{{header_title}}</p>
  </div>
  <div class="nav_user">
    <router-link to="/adress"><span class="address">{{header_city}}<i class="iconfont icon-dropdown"></i></span></router-link>
    <span>
		      <i class="iconfont icon-iconuser-copy"></i>
			</span>
  </div>
  <transition name="is_on">

    <div class="nav_side_box" v-show="is_on">
      <div class="nav_side">
        <ul @click="my_side()">
          <li v-for="t in meun" @click="my_t(t.path,t.name)">
            <router-link to="">{{t.name}}</router-link>
          </li>
        </ul>
      </div>
    </div>
  </transition>
</header>
</template>

<script>
export default {

  data: function() {
    return {
      is_on: false,
      meun: [{
          name: "首页",
          path: "/home"
        },
        {
          name: "影片",
          path: "/details"
        },
        {
          name: "影院地址",
          path: "/adress"
        },
      ]
    }
  },
  methods: {
    my_side: function() {
      this.is_on = !this.is_on
    },
    my_t: function(t, n) {
      this.$router.push({
        path: t,
        query: {}
      });
      //commit方法触发toggleTitle()修改state
      this.$store.commit("toggleTitle", n)
    }
  },
  computed: {
    header_title: function() {
      return this.$store.state.title
    },
    header_city: function() {
      return this.$store.state.city
    }
  },

}
</script>

<style>
@import "../css/iconfont.css",
</style>
